<!--
  ~ Copyright 2022 l1npengtul <l1npengtul@protonmail.com> / The Nokhwa Contributors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!--
  ~ This Source Code Form is subject to the terms of the Mozilla Public
  ~ License, v. 2.0. If a copy of the MPL was not distributed with this
  ~ file, You can obtain one at https://mozilla.org/MPL/2.0/.
  -->

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>nokhwa js capture wasm test</h1>
        <div>
            <div>
                <label id="requestStatus">no permission yet :(</label>
                <div>
                    <button id="requestButton">request permission</button>
                </div>
            </div>
            <div style="margin-top: 1%;">
                <label>supported media constraints:</label>
                <div>
                    <ul id="constraintList">
                    </ul>
                    <button id="constraintButton">get constraints</button>
                </div>
            </div>
            <div style="margin-top: 1%;">
                <label id="deviceLabel">list of devices:</label>
                <div>
                    <ul id="deviceList">
                    </ul>
                    <button id="deviceButton">get devices</button>
                </div>
            </div>
            <div style="margin-top: 1%;">
                <label id="deviceDropdownLabel">devices:</label>
                <div>
                    <select id="deviceDropdown">
                    </select>
                    <button id="deviceOpenButton">open selected device</button>
                </div>
                <div style="margin-top: 1%;">
                    <label id="streamPlayLabel">No Stream...</label>
                    <button id="streamStopButton">Stop Stream</button>
                    <button id="streamCaptureImageButton">Capture and Download</button>
                    <div id="streamPlayArea"></div>
                </div>
            </div>
            
        </div>
        <script src="main.js"></script>
    </body>
</html>